import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin ={
    install(app){
        app.directive('img-lazy',{
            mounted(el,binding)
           { // el：指定绑定的那个元素 img
            // binding：binding.value 指令等于号后面绑定的表达式的值 图片url
            console.log(el,binding.value)
            const {stop} = useIntersectionObserver(
                el,
                ([{ isIntersecting }], ) => {
                 if(isIntersecting){
                    // 代表进入视口区域
                    el.src = binding.value
                    stop()
                 }
                },
              )
            }
        })
        
    }
}